<template>
    <!--
        1、根据 父组件提交过来的 最大值 和  步数 设置按钮（步数没有传 默认为 1）
        2、点击多少的值 传给 父容器
    -->
    <div class="mui-numbox" data-numbox-min='1' :data-numbox-max='max'>
        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
        <input id="test"   class="mui-input-numbox" type="number" ref="input" @change="getValNum" value="1" readonly />
        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
</template>

<script>
    import mui from '../../lib/mui/js/mui.min'
    export default {
        data() {
            return {}
        },
        props: ['max', 'step'],
        mounted() {
            mui('.mui-numbox').numbox().setOption('step', this.step ? this.step : 1)
        },
        methods: {
            // 返回 input 容器里的 值
            getValNum() {
                var value = parseInt(mui('.mui-numbox').numbox().getValue())
                if (value > this.max) {
                    window.alert('封号中 ......')
                }
                this.$emit('addCat', value)
            }
        },
        watch: {
            max(value, oldValue) {
                console.log(value)
                mui('.mui-numbox').numbox().setOption('max', value)
            }
        }

    }
</script>

<style scoped>

</style>